<template>
  <div class="info-panel">
    <!-- 待办事项 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="info-header">
          <div class="info-title">
            <i class="fa fa-tasks"></i>
            <span>待办事项</span>
          </div>
          <el-button type="primary" link size="small">查看全部</el-button>
        </div>
      </template>
      <div class="todo-list">
        <div v-for="(item, index) in todoList" :key="index" class="todo-item">
          <el-tag :type="item.priorityType" size="small" effect="plain">{{ item.priorityText }}</el-tag>
          <div class="todo-content">
            <div class="todo-title">{{ item.title }}</div>
            <div class="todo-info">
              <span>{{ item.time }}</span>
              <span>{{ item.status }}</span>
            </div>
          </div>
          <div class="todo-actions">
            <el-button type="primary" link size="small">处理</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 系统通知 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="info-header">
          <div class="info-title">
            <i class="fa fa-bell"></i>
            <span>系统通知</span>
          </div>
          <el-button type="primary" link size="small">查看全部</el-button>
        </div>
      </template>
      <div class="notice-list">
        <div v-for="(notice, index) in noticeList" :key="index" class="notice-item">
          <div class="notice-icon" :class="notice.type">
            <i :class="notice.icon"></i>
          </div>
          <div class="notice-content">
            <div class="notice-title">{{ notice.title }}</div>
            <div class="notice-time">{{ notice.time }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 公司公告 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="info-header">
          <div class="info-title">
            <i class="fa fa-bullhorn"></i>
            <span>公司公告</span>
          </div>
          <el-button type="primary" link size="small">更多</el-button>
        </div>
      </template>
      <div class="announcement-list">
        <div v-for="(announce, index) in announcements" :key="index" class="announcement-item">
          <div class="announcement-title">{{ announce.title }}</div>
          <div class="announcement-time">{{ announce.time }}</div>
        </div>
      </div>
    </el-card>

    <!-- 业绩排行榜 -->
    <el-card class="info-card" shadow="hover">
      <template #header>
        <div class="info-header">
          <div class="info-title">
            <i class="fa fa-trophy"></i>
            <span>业绩排行榜</span>
          </div>
          <el-radio-group v-model="rankingType" size="small">
            <el-radio-button label="department">部门</el-radio-button>
            <el-radio-button label="person">个人</el-radio-button>
          </el-radio-group>
        </div>
      </template>
      <div class="ranking-list">
        <div v-for="(rank, index) in rankings" :key="index" class="ranking-item">
          <div class="ranking-index" :class="{'top-three': index < 3}">{{ index + 1 }}</div>
          <div class="ranking-avatar">
            <el-avatar :size="28" :src="rank.avatar"></el-avatar>
          </div>
          <div class="ranking-info">
            <div class="ranking-name">{{ rank.name }}</div>
            <div class="ranking-value">{{ rank.value }}</div>
          </div>
          <div class="ranking-rate" :class="rank.trend">
            <i :class="rank.trend === 'up' ? 'fa fa-long-arrow-up' : 'fa fa-long-arrow-down'"></i>
            {{ rank.rate }}
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

interface TodoItem {
  title: string;
  time: string;
  status: string;
  priorityType: 'danger' | 'warning' | 'info' | 'success';
  priorityText: string;
}

interface NoticeItem {
  title: string;
  time: string;
  type: string;
  icon: string;
}

interface AnnouncementItem {
  title: string;
  time: string;
}

interface RankingItem {
  name: string;
  value: string;
  rate: string;
  trend: 'up' | 'down';
  avatar: string;
}

export default defineComponent({
  name: 'InfoPanel',
  setup() {
    // 待办事项
    const todoList = ref<TodoItem[]>([
      { 
        title: '审批销售订单 #SO2023-6782', 
        time: '今天 14:30', 
        status: '待审批', 
        priorityType: 'danger', 
        priorityText: '紧急'
      },
      { 
        title: '采购申请审批 #PR2023-1289', 
        time: '今天 16:00', 
        status: '待审批', 
        priorityType: 'warning', 
        priorityText: '重要'
      },
      { 
        title: '客户合同确认 #CT2023-098', 
        time: '明天 10:30', 
        status: '待处理', 
        priorityType: 'info', 
        priorityText: '普通'
      },
      { 
        title: '月度库存盘点', 
        time: '后天 09:00', 
        status: '未开始', 
        priorityType: 'info', 
        priorityText: '普通'
      },
      { 
        title: '供应商评估报告', 
        time: '10月30日 13:00', 
        status: '进行中', 
        priorityType: 'warning', 
        priorityText: '重要'
      }
    ])

    // 系统通知
    const noticeList = ref<NoticeItem[]>([
      { 
        title: '库存预警：5种原材料低于安全库存', 
        time: '10分钟前', 
        type: 'warning', 
        icon: 'fa fa-exclamation-triangle'
      },
      { 
        title: '系统更新：ERP系统将于今晚22:00-23:00进行维护', 
        time: '1小时前', 
        type: 'info', 
        icon: 'fa fa-info-circle'
      },
      { 
        title: '采购订单 #PO2023-562 已收货', 
        time: '2小时前', 
        type: 'success', 
        icon: 'fa fa-check-circle'
      },
      { 
        title: '生产计划变更：订单 #MO2023-128 延期', 
        time: '昨天', 
        type: 'danger', 
        icon: 'fa fa-times-circle'
      }
    ])

    // 公司公告
    const announcements = ref<AnnouncementItem[]>([
      { title: '关于10月份绩效考核安排的通知', time: '10-15' },
      { title: '新版ISO9001质量管理体系文件发布', time: '10-12' },
      { title: '第四季度生产计划会议通知', time: '10-10' },
      { title: '关于优化库存管理流程的通知', time: '10-05' }
    ])

    // 业绩排行榜
    const rankingType = ref('department')
    const rankings = ref<RankingItem[]>([
      { name: '销售一部', value: '¥1,256,890', rate: '12%', trend: 'up', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { name: '销售二部', value: '¥985,420', rate: '8%', trend: 'up', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { name: '销售三部', value: '¥756,230', rate: '5%', trend: 'up', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { name: '销售四部', value: '¥621,780', rate: '3%', trend: 'down', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
      { name: '销售五部', value: '¥521,450', rate: '2%', trend: 'down', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
    ])

    return {
      todoList,
      noticeList,
      announcements,
      rankingType,
      rankings
    }
  }
})
</script>

<style scoped lang="scss">
.info-panel {
  .info-card {
    margin-bottom: 15px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .info-title {
        display: flex;
        align-items: center;
        
        i {
          margin-right: 8px;
          font-size: 16px;
        }
        
        span {
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
    
    // 待办事项样式
    .todo-list {
      .todo-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .todo-content {
          flex: 1;
          margin: 0 10px;
          
          .todo-title {
            font-size: 13px;
            margin-bottom: 3px;
            color: #303133;
          }
          
          .todo-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    
    // 通知列表样式
    .notice-list {
      .notice-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .notice-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 28px;
          height: 28px;
          border-radius: 50%;
          margin-right: 10px;
          
          &.warning {
            background-color: #fdf6ec;
            color: #e6a23c;
          }
          
          &.danger {
            background-color: #fef0f0;
            color: #f56c6c;
          }
          
          &.info {
            background-color: #ecf5ff;
            color: #409eff;
          }
          
          &.success {
            background-color: #f0f9eb;
            color: #67c23a;
          }
        }
        
        .notice-content {
          flex: 1;
          
          .notice-title {
            font-size: 13px;
            margin-bottom: 3px;
            color: #303133;
          }
          
          .notice-time {
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    
    // 公告列表样式
    .announcement-list {
      .announcement-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .announcement-title {
          font-size: 13px;
          color: #303133;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .announcement-time {
          font-size: 12px;
          color: #909399;
          margin-left: 10px;
        }
      }
    }
    
    // 排行榜样式
    .ranking-list {
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ebeef5;
        
        &:last-child {
          border-bottom: none;
        }
        
        .ranking-index {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background-color: #f5f7fa;
          color: #909399;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          margin-right: 10px;
          
          &.top-three {
            background-color: #f5f7fa;
            color: #303133;
            font-weight: bold;
            
            &:nth-child(1) {
              background-color: #ffece5;
              color: #ff7d39;
            }
          }
        }
        
        .ranking-avatar {
          margin-right: 10px;
        }
        
        .ranking-info {
          flex: 1;
          
          .ranking-name {
            font-size: 13px;
            margin-bottom: 3px;
            color: #303133;
          }
          
          .ranking-value {
            font-size: 12px;
            color: #409eff;
            font-weight: 500;
          }
        }
        
        .ranking-rate {
          font-size: 12px;
          display: flex;
          align-items: center;
          
          &.up {
            color: #67c23a;
          }
          
          &.down {
            color: #f56c6c;
          }
          
          i {
            margin-right: 3px;
          }
        }
      }
    }
  }
}
</style> 